<template>
	<!-- 事件绑定:
	点击事件使用 v-onclick="function" 或者 @click=function 都行
	 -->
	<view>
		<swiper indicator-dots :indicator-color="indicatorColorDefault" :indicator-active-color="indicatorColorSelect" :autoplay="ifautoplay" :interval="interval" vertical>
			<swiper-item  v-on:click="onClickA">
				<span>A{{numA}}</span>
			</swiper-item>
			<swiper-item @click="onClickB">
				<span>B{{numB}}</span>
			</swiper-item>
			<swiper-item>
				<span>C{{numC}}</span>
			</swiper-item>
		</swiper>
	</view>
	<view style="text-align: center;height: 30px;">
		<text :style="{'font-size':tipSize+'px'}">轮播图片</text>
	</view>
	<view style="text-align: center;">
		<span :style="{'font-size':'20px'}" @click="switchIndicatorColor">点击切换指示点颜色:</span> 
		<text :style="{'color':indicatorColorDefault}">默认</text> 
		<text :style="{'color':indicatorColorSelect}">选中</text>
	</view>
	<view>
		<span>是否自动轮播：</span><switch checked @change="onSwichChange"></switch>
	</view>
</template>

<script setup>
	import {ref} from "vue";
	
	// 属性值 的绑定
	const interval = 2000; // 轮播间隔
	const ifautoplay = ref(true); // 是否自动播放
	
	// !+[event]
	// 点击时候更换轮播内容
	const numA = ref(1);
	const numB = ref(2);
	const numC = ref(3);
	function onClickA(){
		numA.value++
	}
	function onClickB(){
		numB.value *= 10
	}
	
	// 点击切换指示点颜色
	const indicatorColorDefault = ref("#007aff");
	const indicatorColorSelect = ref("#4cd964");
	function switchIndicatorColor(){
		// 使用随机数来随机颜色出来
		indicatorColorDefault.value = "#" + String(Math.random()).substring(2,8)
		indicatorColorSelect.value = "#" + String(Math.random()).substring(2,8)
		console.log(indicatorColorDefault.value)
		console.log(indicatorColorSelect.value)
	}
	
	// 控制是否自动轮播的开关
	function onSwichChange(e) {
		ifautoplay.value = e.detail.value // 是否轮播依赖switch开关的开关
	}
	// !-[event]
	

	
	// !! 用于class/style中控制类效果的数据属性
	const ifSetBigRed = ref(true); // 在class中生效必须使用引用变量而不是普通变量
	const ifSetFold = ref(true); 
	
	// !!直接使用对象属性来控制，其实就是普通的属性值的绑定
	const redFoldFont = ref({
		toBigRed : true,
		toFold: true
	})
	
	// 给内敛属性定义
	// 注意style属性要用双引号包裹
	const blueItalicFont = ref({
		"color" : "blue",
		"font-style": "italic"
	})
	
	// 内敛属性的动态变更
	const tipSize = ref(10);
	let a=0;
	setInterval(()=>{
		a++;
		if (a%2==1) {
			tipSize.value = 10; // 注意此处修改的是 tipSize对象的value属性
		} else {
			tipSize.value = 20;
		}
	}, interval)
</script>

<style>
	.toBigRed {
		color: red;
	}
	
	.toFold {
		font-weight: bold;
	}
	
    swiper {
		/* 滑动区域父元素 */
		/* 
		【vw】:viewport width;
		 这是一种CSS的样式说明，一种相对长度单位，100表示整个可视宽度 ，业绩是100%
		*/
		width: 100vw; 
		/* height和line-height保证文字垂直居中 */
		height: 375rpx;
		/* 
		【rpx】:responsive pixel 是uniapp中的一种特有长度单位，相对的。
		uniapp将屏幕的宽度同一个规定为750rpx，基于该规定的宽高设置。
		比如高度设定为375rpx，就是相对于屏幕宽度的一半。
		在iphone14: 430宽*932高的尺寸下，375rpx就相当于430/2px即215px            
		 */
		line-height: 375rpx;
    }
	
	/**
	swiper-item:nth-child(2n) 是一个 CSS 选择器，用于选中特定的元素，具体含义如下：
	swiper-item：这是一个类名或者标签名，代表要筛选的目标元素集合。例如，如果在 HTML 中有一系列 <div class="swiper-item"> 标签，这个选择器就会从这些元素开始筛选。
	nth-child(2n)：这是一个伪类选择器，用于基于元素在其父元素中的位置来选择元素。
		n 是一个从 0 开始的变量，2n 表示选中所有位置序号为偶数的元素。
		也就是说，当n = 0时，选中第 1 个元素；n = 1 时，选中第 2 个元素；n = 2时，选中第 4 个元素，依此类推。
	把这两部分结合起来，swiper-item:nth-child(2n) 会从所有 swiper-item 类的元素中，挑出那些在其父元素里位置是偶数的元素 ，然后可以给这些被选中的元素应用后续定义的 CSS 样式，像更改背景颜色、字体样式、尺寸大小等。
	*/
	swiper-item:nth-child(2n) {
		background-color: #bababa;
	}
	
	swiper-item {
		/* 子元素,继承宽高 */
		width: 100%;
		height: 100%;
		background-color: grey;
		text-align: center;
		font-size: 36rpx;

	}
	/* uniapp默认情况下图片是 宽320px*高240px;
	此处设置为100%让他继承父元素宽高；
	*/
	navigator {
		width: 100%;
		height: 100%;
	}

</style>
